import { FC, HTMLAttributes, ReactNode } from 'react';
import { Form } from 'antd';

import { FormItemProps } from 'antd/lib/form/FormItem';

interface EditableCellProps<T = any>
  extends HTMLAttributes<HTMLElement>,
    Pick<FormItemProps, 'rules'> {
  editing: boolean;
  dataIndex: string;
  title: any;
  record: T;
  index: number;
  children: ReactNode;
  component: ReactNode;
}

const EditableCell: FC<EditableCellProps> = ({
  editing,
  dataIndex,
  title,
  component,
  rules,
  record,
  index,
  children,
  ...restProps
}) => {
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item name={dataIndex} style={{ margin: 0 }} rules={rules}>
          {component}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

export default EditableCell;
